<template>
  <div class="main">
    <div class="big">
    <div class="w" theme>
      <div class="up">
        <div class="r1">{{name}}</div>
        <div class="l1"></div>
      </div>
      <!-- <div class="middle" v-for="i in allInformList" :key="i.informId"> -->
        <div class="middle">
        <h1>{{allInform2.informName}}</h1>
        <li>发布日：{{allInform2.informDate}} </li>
        <p v-if="loadingFinish">
          {{allInform2.inform}}
        </p>
      </div>
      <div class="bottom"></div>
    </div>
    <!-- <div class="whiteplace"></div> -->
    <appBottom></appBottom>
   </div>
  </div>
  </template>
<script>
import { homeshow2 } from '@/api/compoents'
import appBottom from '../../components/bottom.vue'
export default {
  name: 'homePage',
  components: {
    appBottom
  },
  data () {
    return {
      id: -1,
      name: '',
      loadingFinish: false,
      allInform2: {}
      // InformId: []
    }
  },
  methods: {
    async gethomeshow2 () {
      this.loadingFinish = false
      const { data: res } = await homeshow2(this.id)
      console.log(res, 'ooo')
      if (res.code === 200) {
        console.log(res);
        this.allInform2 = res.allInformList[0]
        // this.InformId = res.allInformList[0].InformId
      }
      setTimeout(() => {
        this.loadingFinish = true
      }, 200)
    }
  },
  async updated () {
    console.log(this.$route)
    this.id = this.$route.query.id// route是当前页面获取路由跳转时传的参数，而router是路由跳转
    this.name = this.$route.query.name // route是当前页面获取路由跳转时传的参数，而router是路由跳转
  },
  async mounted () {
    this.id = this.$route.query.id
    this.name = this.$route.query.name // route是当前页面获取路由跳转时传的参数，而router是路由跳转
    await this.gethomeshow2()
  }
}
</script>
<style scoped lang="less">
  .main{
    animation: show .5s;
    min-height: calc(100vh - var(--xd--fontsize) * 3);
    position: relative;
  }
// .big{
// position: relative;
// }
.w{
  --w: calc(var(--xd--fontsize) * 5);
  width: 92vw;
  margin: 1vw auto;
  border-radius:calc(var(--w) * .1) ;
}
.up{
  display: flex;
  flex-wrap: wrap;
justify-content: space-between;
border-bottom: calc(var(--w) * .01) solid rgb(194, 193, 193);
padding: 0 calc(var(--w) * .2);
font-size:calc(var(--w) * .18);
}
.r1{
  padding: calc(var(--w) *.1) calc(var(--w) *.08);
  padding-bottom: calc(var(--w) *.05);
  font-weight: 700;
  border-bottom: 4px solid #3e6db5;
  font-size:calc(var(--w) *.15);
}
.middle{
  padding: 0 calc(var(--xd--fontsize) * 1);
  &>h1{
    padding-top:calc(var(--w) * .2);
    font-size:calc(var(--w) * .15);
  }
  &>li{
    padding:calc(var(--w) * .1) 0;
    font-size:calc(var(--w) * .08);
  }
  &>p{
    font-size:calc(var(--w) * .11);
    text-align: left;
    // white-space: pre-wrap ;
/* 文本按照自己的原本格式展示 */
text-indent:2em;
line-height: calc(var(--w) * .25);
  }
}
.bottom{
  padding:calc(var(--w) * .05) 0;
}
</style>
